<template>
  <Left v-if="!animationShow" />
  <Right v-if="!animationShow" />

  <FloatButton :btn_data="btn_data"></FloatButton>

  <Animation v-if="animationShow" />
</template>

<script lang="ts" setup>
import { onBeforeUnmount, reactive, ref } from 'vue'

import FloatButton from '@/components/FloatButton/index.vue'

import Left from './Panel/left/index.vue'
import Right from './Panel/right/index.vue'
import Animation from './children/Animation.vue'

import { initVR, exitVR } from './funcs/vr'
import { initAdministrativeDivision, exitAdministrativeDivision } from './funcs/administrativeDivision'
import { initEconomics, exitEconomics } from './funcs/economics'

const animationShow = ref(false)

const btn_data = reactive([
  {
    id: 0,
    name: '城市漫游',
    init: () => {
      animationShow.value = true
    },
    exit: () => {
      animationShow.value = false
      fdapi.camera.stopAnimation()
    }
  },
  { id: 1, name: '虚拟现实', init: initVR, exit: exitVR },
  { id: 2, name: '行政区划', init: initAdministrativeDivision, exit: exitAdministrativeDivision },
  { id: 3, name: '经济态势', init: initEconomics, exit: exitEconomics }
])

onBeforeUnmount(() => {
  // 离开页面时，清除所有的分析内容
  btn_data.forEach(item => item.exit())
})
</script>
<style lang="scss" scoped>
.info_list {
  @include MarginBottom(10);
  @include MarginLeft(10);
  @include Width(280);
  .item {
    display: flex;
    @include Width(400);
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ffffff2a;
    @include Padding(8, 5, 8, 5);
    .info {
      @include FontSize(16);
      display: flex;
      align-items: center;
      .img {
        margin-right: 5px;
      }
    }
    .count {
      @include FontSize(18);
      font-family: PangMenZhengDao;
      color: #00ffff;
      color: rgb(19, 174, 255);
    }
  }
}
</style>
